<template>
    <div>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
            style="width: 50%"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="客户名称：" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更类型：" prop="type">
                        <el-select
                            v-model="ruleForm.type"
                            placeholder="请选择变更类型"
                            style="width: 100%"
                        >
                            <el-option
                                label="区域一"
                                value="shanghai"
                            ></el-option>
                            <el-option
                                label="区域二"
                                value="beijing"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人：" prop="tel">
                        <el-select
                            v-model="ruleForm.tel"
                            placeholder="请选择联系人"
                            style="width: 100%"
                        >
                            <el-option label="aaa" value="aaaa"></el-option>
                            <el-option label="bbb" value="bbb"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更时间：" prop="date">
                        <el-date-picker
                            v-model="ruleForm.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            style="width: 100%"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更模块：" prop="module">
                        <el-select
                            v-model="ruleForm.module"
                            placeholder="请选择变更模块"
                            style="width: 100%"
                        >
                            <el-option label="aaa" value="aaaa"></el-option>
                            <el-option label="bbb" value="bbb"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户影响：" prop="effets">
                        <el-select
                            v-model="ruleForm.effets"
                            placeholder="请选择客户影响"
                            style="width: 100%"
                        >
                            <el-option label="aaa" value="aaaa"></el-option>
                            <el-option label="bbb" value="bbb"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="操作风险等级：" prop="riskGrade">
                        <el-rate
                            v-model="ruleForm.riskGrade"
                            style="padding-top: 10px"
                        ></el-rate>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更理由：" prop="reason">
                        <el-select
                            v-model="ruleForm.reason"
                            placeholder="请选择变更理由"
                            style="width: 100%"
                        >
                            <el-option label="aaa" value="aaaa"></el-option>
                            <el-option label="bbb" value="bbb"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更等级：" prop="changeGrade">
                        <el-rate
                            v-model="ruleForm.changeGrade"
                            style="padding-top: 10px"
                        ></el-rate>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变更内容简述：" prop="desc">
                        <el-input
                            v-model="ruleForm.desc"
                            placeholder="请输入变更内容简述"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                name: "",
                type: "",
                tel: "",
                module: "",
                effets: "",
                riskGrade: 1,
                reason: "",
                changeGrade: 5,
                desc: "",
            },
            rules: {
                name: [{ required: true, message: "请输入姓名" }],
                type: [
                    {
                        required: true,
                        message: "请选择变更类型",
                        trigger: "change",
                    },
                ],
                tel: [{ required: true, message: "请选择联系人" }],
                module: [{ required: true, message: "请选择变更模块" }],
                effets: [{ required: true, message: "请选择客户影响" }],
                riskGrade: [{ required: true, message: "请选择操作风险等级" }],
                reason: [{ required: true, message: "请选择变更理由" }],
                changeGrade: [{ required: true, message: "请选择变更等级" }],
                desc: [{ required: true, message: "请输入变更内容简述" }],
            },
        };
    },
    methods: {},
};
</script>

<style lang="less" scoped>
</style>